<template>
  <div>
    <div
      style="
        border: #efefef solid 1px;
        height: calc(100vh - 80px);
        width: 100%;
      "
    >
      <RelationGraph
        ref="relationGraph$"
        :options="options"
        :on-node-click="onNodeClick"
      >
        <template #node="{ node }">
          <div style="padding-top: 20px">{{ node.text }}</div>
        </template>
      </RelationGraph>
    </div>
  </div>
</template>
    
<script setup lang="ts">
import { onMounted, ref } from "vue";
import RelationGraph, {
  RGJsonData,
  RGNode,
  RGUserEvent,
} from "relation-graph/vue3";

const relationGraph$ = ref<RelationGraph>();
const options = {
  defaultExpandHolderPosition: "right",
  debug: true,
  showDebugPanel: true,
};

const onNodeClick = (node: RGNode, e: RGUserEvent) => {
  console.log("onNodeClick:", node.id);
  return true;
};

onMounted(() => {
  const graphJsonData: RGJsonData = {
    rootId: "体检中心",
    nodes: [
      {
        id: "体检中心",
        text: "体检中心",
        data: {
          pic: "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2308340537,462224207&fm=58&app=83&f=JPEG?w=250&h=250&s=EC708F46DA96B89CB69D5DDA0300D014",
          name: "侯亮平",
          myicon: "el-icon-star-on",
        },
      },
      {
        id: "男科",
        text: "男科",
        data: {
          pic: "https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2677153550,2207805387&fm=58&app=83&f=JPEG?w=250&h=250&s=249039DDC2D153D411A851360300C062",
          name: "李达康",
          myicon: "el-icon-setting",
        },
      },
      {
        id: "包茎",
        text: "包茎",
        data: {
          pic: "https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1725297532,1915921796&fm=58&app=83&f=JPEG?w=250&h=250&s=FE8EA444A60759554DAC1DBB03000092",
          name: "祁同伟",
          myicon: "el-icon-setting",
        },
      },
      {
        id: "包皮龟头炎",
        text: "包皮龟头炎",
        data: {
          pic: "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2025797948,1615296290&fm=58&app=83&f=JPEG?w=250&h=250&s=B5B04C331F32739C4604F9F503007021",
          name: "陈岩石",
          myicon: "el-icon-star-on",
        },
      },
      {
        id: "附睾炎",
        text: "附睾炎",
        data: {
          pic: "https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=344720653,260255884&fm=58&app=83&f=JPEG?w=250&h=250&s=57B8AB676AE862941D94ED170300E060",
          name: "陆亦可",
          myicon: "el-icon-setting",
        },
      },
      {
        id: "包皮过长",
        text: "包皮过长",
        data: {
          pic: "https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3098576865,849900134&fm=58&app=83&f=JPEG?w=250&h=250&s=EDE01A63A65917DC104509920300C0C1",
          name: "高育良",
          myicon: "el-icon-setting",
        },
      },
      {
        id: "妇科",
        text: "妇科",
        data: {
          pic: "https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2747443453,2680399969&fm=58&app=83&f=JPEG?w=150&h=150&s=DB8828C1562265150814ADFE03007012",
          name: "高小凤",
          myicon: "el-icon-headset",
        },
      },
      {
        id: "闭经",
        text: "闭经",
        data: {
          pic: "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3301823375,1282024443&fm=58&app=83&f=JPG?w=250&h=250&s=2BC2834F2C22A25D12C06CA80300E013",
          name: "赵东来",
          myicon: "el-icon-s-tools",
        },
      },
      {
        id: "处女膜",
        text: "处女膜",
        data: {
          pic: "https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=134233720,666111889&fm=58&app=83&f=JPG?w=250&h=250&s=4DE5A844801F1BD461E039A20300C0C3",
          name: "程度",
          myicon: "el-icon-star-on",
        },
      },
      {
        id: "单纯性外阴炎",
        text: "单纯性外阴炎",
        data: {
          pic: "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1215039713,3597142764&fm=58&app=83&f=JPEG?w=250&h=250&s=1A20E0018E3B6E9CD10C7DA30300E081",
          name: "吴惠芬",
          myicon: "el-icon-s-promotion",
        },
      },
      {
        id: "神经外科",
        text: "神经外科",
        data: {
          pic: "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1140839330,2922201597&fm=58&app=83&f=JPEG?w=250&h=250&s=CDF9A844D45AB87512C8508B0100F080",
          name: "赵瑞龙",
          myicon: "el-icon-s-promotion",
        },
      },
      {
        id: "胶质细胞",
        text: "胶质细胞",
        data: {
          pic: "https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2110325119,1633583088&fm=58&app=83&f=JPEG?w=120&h=120&s=971E35C05A43305DCA7C1C0B030080C",
          name: "赵立春",
          myicon: "el-icon-star-on",
        },
      },
      {
        id: "颅内血管",
        text: "颅内血管",
        data: {
          pic: "https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1416498138,2265298708&fm=58&app=83&f=JPEG?w=250&h=250&s=F906CF1C0E1356D046AC3CEB0300B0A0",
          name: "陈海",
          myicon: "el-icon-s-promotion",
        },
      },
      {
        id: "颅内肿瘤",
        text: "颅内肿瘤",
        data: {
          pic: "https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3749144697,3456463661&fm=58&app=83&f=JPEG?w=250&h=250&s=783823D3FE621E94138CC08B030070C2",
          name: "梁璐",
          myicon: "el-icon-star-on",
        },
      },
      {
        id: "颅咽管瘤",
        text: "颅咽管瘤",
        data: {
          pic: "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2263876103,310235844&fm=58&app=83&f=JPEG?w=250&h=250&s=6CE2A944CC1223DC632CC09203009082",
          name: "刘新建",
          myicon: "el-icon-setting",
        },
      },
      {
        id: "手外科",
        text: "手外科",
        data: {
          pic: "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3590139977,3135325708&fm=58&app=83&f=JPEG?w=250&h=250&s=2F1C8B46C4A214BCE100A81A03004091",
          name: "欧阳菁",
          myicon: "el-icon-setting",
        },
      },
      {
        id: "脓性指头炎",
        text: "脓性指头炎",
        data: {
          pic: "https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2110325119,1633583088&fm=58&app=83&f=JPEG?w=120&h=120&s=971E35C05A43305DCA7C1C0B030080C",
          name: "吴心怡",
          myicon: "el-icon-star-on",
        },
      },
      {
        id: "脓性腱鞘炎",
        text: "脓性腱鞘炎",
        data: {
          pic: "https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=4153440298,254451173&fm=58&app=83&f=JPEG?w=250&h=250&s=07C2B4488C42D355548CC41F010080D1",
          name: "蔡成功",
          myicon: "el-icon-setting",
        },
      },
      {
        id: "生殖科",
        text: "生殖科",
        data: {
          pic: "https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2747443453,2680399969&fm=58&app=83&f=JPEG?w=150&h=150&s=DB8828C1562265150814ADFE03007012",
          name: "高小凤",
          myicon: "el-icon-headset",
        },
      },
      {
        id: "不孕症",
        text: "不孕症",
        data: {
          pic: "https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2747443453,2680399969&fm=58&app=83&f=JPEG?w=150&h=150&s=DB8828C1562265150814ADFE03007012",
          name: "高小凤",
          myicon: "el-icon-headset",
        },
      },
      {
        id: "泌尿外科",
        text: "泌尿外科",
        data: {
          pic: "https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2747443453,2680399969&fm=58&app=83&f=JPEG?w=150&h=150&s=DB8828C1562265150814ADFE03007012",
          name: "高小凤",
          myicon: "el-icon-headset",
        },
      },
      {
        id: "尿道狭窄",
        text: "尿道狭窄",
        data: {
          pic: "https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1725297532,1915921796&fm=58&app=83&f=JPEG?w=250&h=250&s=FE8EA444A60759554DAC1DBB03000092",
          name: "祁同伟",
          myicon: "el-icon-setting",
        },
      },
      {
        id: "尿道损伤",
        text: "尿道损伤",
        data: {
          pic: "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2025797948,1615296290&fm=58&app=83&f=JPEG?w=250&h=250&s=B5B04C331F32739C4604F9F503007021",
          name: "陈岩石",
          myicon: "el-icon-star-on",
        },
      },
      {
        id: "尿道结石",
        text: "尿道结石",
        data: {
          pic: "https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=344720653,260255884&fm=58&app=83&f=JPEG?w=250&h=250&s=57B8AB676AE862941D94ED170300E060",
          name: "陆亦可",
          myicon: "el-icon-setting",
        },
      },
      {
        id: "前列腺",
        text: "前列腺",
        data: {
          pic: "https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3098576865,849900134&fm=58&app=83&f=JPEG?w=250&h=250&s=EDE01A63A65917DC104509920300C0C1",
          name: "高育良",
          myicon: "el-icon-setting",
        },
      },
      {
        id: "心胸外科",
        text: "心胸外科",
        data: {
          pic: "https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2747443453,2680399969&fm=58&app=83&f=JPEG?w=150&h=150&s=DB8828C1562265150814ADFE03007012",
          name: "高小凤",
          myicon: "el-icon-headset",
        },
      },
      {
        id: "肺栓塞",
        text: "肺栓塞",
        data: {
          pic: "https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1725297532,1915921796&fm=58&app=83&f=JPEG?w=250&h=250&s=FE8EA444A60759554DAC1DBB03000092",
          name: "祁同伟",
          myicon: "el-icon-setting",
        },
      },
      {
        id: "肺大泡",
        text: "肺大泡",
        data: {
          pic: "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2025797948,1615296290&fm=58&app=83&f=JPEG?w=250&h=250&s=B5B04C331F32739C4604F9F503007021",
          name: "陈岩石",
          myicon: "el-icon-star-on",
        },
      },
      {
        id: "肺瘤",
        text: "肺瘤",
        data: {
          pic: "https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=344720653,260255884&fm=58&app=83&f=JPEG?w=250&h=250&s=57B8AB676AE862941D94ED170300E060",
          name: "陆亦可",
          myicon: "el-icon-setting",
        },
      },
      {
        id: "肺四联症",
        text: "肺四联症",
        data: {
          pic: "https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3098576865,849900134&fm=58&app=83&f=JPEG?w=250&h=250&s=EDE01A63A65917DC104509920300C0C1",
          name: "高育良",
          myicon: "el-icon-setting",
        },
      },
      {
        id: "儿科",
        text: "儿科",
        data: {
          pic: "https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2747443453,2680399969&fm=58&app=83&f=JPEG?w=150&h=150&s=DB8828C1562265150814ADFE03007012",
          name: "高小凤",
          myicon: "el-icon-headset",
        },
      },
      {
        id: "细胞病毒感染症",
        text: "细胞病毒感染症",
        data: {
          pic: "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3301823375,1282024443&fm=58&app=83&f=JPG?w=250&h=250&s=2BC2834F2C22A25D12C06CA80300E013",
          name: "赵东来",
          myicon: "el-icon-s-tools",
        },
      },
      {
        id: "儿童遗尿症",
        text: "儿童遗尿症",
        data: {
          pic: "https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=134233720,666111889&fm=58&app=83&f=JPG?w=250&h=250&s=4DE5A844801F1BD461E039A20300C0C3",
          name: "程度",
          myicon: "el-icon-star-on",
        },
      },
      {
        id: "川崎病",
        text: "川崎病",
        data: {
          pic: "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1215039713,3597142764&fm=58&app=83&f=JPEG?w=250&h=250&s=1A20E0018E3B6E9CD10C7DA30300E081",
          name: "吴惠芬",
          myicon: "el-icon-s-promotion",
        },
      },
      {
        id: "乳腺外科",
        text: "乳腺外科",
        data: {
          pic: "https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2747443453,2680399969&fm=58&app=83&f=JPEG?w=150&h=150&s=DB8828C1562265150814ADFE03007012",
          name: "高小凤",
          myicon: "el-icon-headset",
        },
      },
      {
        id: "乳管内乳头状瘤",
        text: "乳管内乳头状瘤",
        data: {
          pic: "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3301823375,1282024443&fm=58&app=83&f=JPG?w=250&h=250&s=2BC2834F2C22A25D12C06CA80300E013",
          name: "赵东来",
          myicon: "el-icon-s-tools",
        },
      },
      {
        id: "乳腺炎",
        text: "乳腺炎",
        data: {
          pic: "https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=134233720,666111889&fm=58&app=83&f=JPG?w=250&h=250&s=4DE5A844801F1BD461E039A20300C0C3",
          name: "程度",
          myicon: "el-icon-star-on",
        },
      },
      {
        id: "脓性乳腺炎",
        text: "脓性乳腺炎",
        data: {
          pic: "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1215039713,3597142764&fm=58&app=83&f=JPEG?w=250&h=250&s=1A20E0018E3B6E9CD10C7DA30300E081",
          name: "吴惠芬",
          myicon: "el-icon-s-promotion",
        },
      },
      {
        id: "甲状腺外科",
        text: "甲状腺外科",
        data: {
          pic: "https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2747443453,2680399969&fm=58&app=83&f=JPEG?w=150&h=150&s=DB8828C1562265150814ADFE03007012",
          name: "高小凤",
          myicon: "el-icon-headset",
        },
      },
      {
        id: "单纯性甲状腺肿",
        text: "单纯性甲状腺肿",
        data: {
          pic: "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3301823375,1282024443&fm=58&app=83&f=JPG?w=250&h=250&s=2BC2834F2C22A25D12C06CA80300E013",
          name: "赵东来",
          myicon: "el-icon-s-tools",
        },
      },
      {
        id: "甲状腺腺癌",
        text: "甲状腺腺癌",
        data: {
          pic: "https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=134233720,666111889&fm=58&app=83&f=JPG?w=250&h=250&s=4DE5A844801F1BD461E039A20300C0C3",
          name: "程度",
          myicon: "el-icon-star-on",
        },
      },
      {
        id: "甲状腺癌",
        text: "甲状腺癌",
        data: {
          pic: "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1215039713,3597142764&fm=58&app=83&f=JPEG?w=250&h=250&s=1A20E0018E3B6E9CD10C7DA30300E081",
          name: "吴惠芬",
          myicon: "el-icon-s-promotion",
        },
      },
      {
        id: "肿瘤科",
        text: "肿瘤科",
        data: {
          pic: "https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2747443453,2680399969&fm=58&app=83&f=JPEG?w=150&h=150&s=DB8828C1562265150814ADFE03007012",
          name: "高小凤",
          myicon: "el-icon-headset",
        },
      },
      {
        id: "黑色素瘤",
        text: "黑色素瘤",
        data: {
          pic: "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3301823375,1282024443&fm=58&app=83&f=JPG?w=250&h=250&s=2BC2834F2C22A25D12C06CA80300E013",
          name: "赵东来",
          myicon: "el-icon-s-tools",
        },
      },
      {
        id: "脂肪瘤",
        text: "脂肪瘤",
        data: {
          pic: "https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=134233720,666111889&fm=58&app=83&f=JPG?w=250&h=250&s=4DE5A844801F1BD461E039A20300C0C3",
          name: "程度",
          myicon: "el-icon-star-on",
        },
      },
      {
        id: "血管内皮瘤",
        text: "血管内皮瘤",
        data: {
          pic: "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1215039713,3597142764&fm=58&app=83&f=JPEG?w=250&h=250&s=1A20E0018E3B6E9CD10C7DA30300E081",
          name: "吴惠芬",
          myicon: "el-icon-s-promotion",
        },
      },
      {
        id: "产科",
        text: "产科",
        data: {
          pic: "https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2747443453,2680399969&fm=58&app=83&f=JPEG?w=150&h=150&s=DB8828C1562265150814ADFE03007012",
          name: "高小凤",
          myicon: "el-icon-headset",
        },
      },
      {
        id: "流产",
        text: "流产",
        data: {
          pic: "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3301823375,1282024443&fm=58&app=83&f=JPG?w=250&h=250&s=2BC2834F2C22A25D12C06CA80300E013",
          name: "赵东来",
          myicon: "el-icon-s-tools",
        },
      },
      {
        id: "过期妇女",
        text: "过期妇女",
        data: {
          pic: "https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=134233720,666111889&fm=58&app=83&f=JPG?w=250&h=250&s=4DE5A844801F1BD461E039A20300C0C3",
          name: "程度",
          myicon: "el-icon-star-on",
        },
      },
      {
        id: "产褥感染",
        text: "产褥感染",
        data: {
          pic: "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1215039713,3597142764&fm=58&app=83&f=JPEG?w=250&h=250&s=1A20E0018E3B6E9CD10C7DA30300E081",
          name: "吴惠芬",
          myicon: "el-icon-s-promotion",
        },
      },
    ],
    lines: [
      {
        from: "体检中心",
        to: "男科",
      },
      {
        from: "体检中心",
        to: "泌尿外科",
      },
      {
        from: "泌尿外科",
        to: "尿道狭窄",
      },
      {
        from: "泌尿外科",
        to: "尿道损伤",
      },
      {
        from: "泌尿外科",
        to: "尿道结石",
      },
      {
        from: "泌尿外科",
        to: "前列腺",
      },
      {
        from: "体检中心",
        to: "心胸外科",
      },
      {
        from: "心胸外科",
        to: "肺栓塞",
      },
      {
        from: "心胸外科",
        to: "肺大泡",
      },
      {
        from: "心胸外科",
        to: "肺瘤",
      },
      {
        from: "心胸外科",
        to: "肺四联症",
      },
      {
        from: "体检中心",
        to: "儿科",
      },
      {
        from: "体检中心",
        to: "乳腺外科",
      },
      {
        from: "体检中心",
        to: "甲状腺外科",
      },
      {
        from: "体检中心",
        to: "肿瘤科",
      },
      {
        from: "体检中心",
        to: "产科",
      },
      {
        from: "体检中心",
        to: "生殖科",
      },
      {
        from: "生殖科",
        to: "不孕症",
      },
      {
        from: "男科",
        to: "包茎",
      },
      {
        from: "男科",
        to: "包皮龟头炎",
      },
      {
        from: "男科",
        to: "附睾炎",
      },
      {
        from: "男科",
        to: "包皮过长",
      },
      {
        from: "体检中心",
        to: "妇科",
      },
      {
        from: "妇科",
        to: "闭经",
      },
      {
        from: "妇科",
        to: "处女膜",
      },
      {
        from: "妇科",
        to: "单纯性外阴炎",
      },
      {
        from: "儿科",
        to: "细胞病毒感染症",
      },
      {
        from: "儿科",
        to: "儿童遗尿症",
      },
      {
        from: "儿科",
        to: "川崎病",
      },
      {
        from: "乳腺外科",
        to: "乳管内乳头状瘤",
      },
      {
        from: "乳腺外科",
        to: "乳腺炎",
      },
      {
        from: "乳腺外科",
        to: "脓性乳腺炎",
      },
      {
        from: "甲状腺外科",
        to: "单纯性甲状腺肿",
      },
      {
        from: "甲状腺外科",
        to: "甲状腺腺癌",
      },
      {
        from: "甲状腺外科",
        to: "甲状腺癌",
      },
      {
        from: "肿瘤科",
        to: "黑色素瘤",
      },
      {
        from: "肿瘤科",
        to: "脂肪瘤",
      },
      {
        from: "肿瘤科",
        to: "血管内皮瘤",
      },
      {
        from: "产科",
        to: "流产",
      },
      {
        from: "产科",
        to: "过期妇女",
      },
      {
        from: "产科",
        to: "产褥感染",
      },
      {
        from: "体检中心",
        to: "神经外科",
      },
      {
        from: "神经外科",
        to: "胶质细胞",
      },
      {
        from: "神经外科",
        to: "颅内血管",
      },
      {
        from: "神经外科",
        to: "颅内肿瘤",
      },
      {
        from: "神经外科",
        to: "颅咽管瘤",
      },
      {
        from: "体检中心",
        to: "手外科",
      },
      {
        from: "手外科",
        to: "脓性指头炎",
      },
      {
        from: "手外科",
        to: "脓性腱鞘炎",
      },
    ],
  };

  relationGraph$.value?.setJsonData(graphJsonData, () => {
    console.log("relationGraph ready!");
  });
});
</script>
    